<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>model</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-24 -->
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
			font-size: 12px;
		}
		body {
			padding : 40px;
		}
		.topicList {
			width: 300px;
			border: 1px solid #999;
		}
		.topicList li {
			list-style: none;
			padding: 8px 0px;
			margin-left: 10px;
			border-bottom: 1px dotted #aaa;
		}
		.topicList ul {
			display: none;
		}
		.topicList h3 {
			height: 35px;
			background: #347;
			color: #fff;
			border-bottom： 1px solid #fff;
			cursor: pointer;
		}
		.topicList h3 span {
			position: relative;
			left: 15px;
			top: 10px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			/*
			$("#imgElement img").click(function() {
				if($(this).attr("src") == "1.jpg") {
					$(this).attr("src","2.jpg")
					.css("opacity",0.0)
					.animate({
						opacity: 1.0
					},1000);
				} else {
					$(this).attr("src","1.jpg")
					.css("opacity",0.0)
					.animate({
						opacity: 1.0
					},1000);
				}
			});*/
			
			function change() {
				var ele = $("#imgElement img");
				if(ele.attr("src") == "1.jpg") {
					ele.attr("src","2.jpg")
					.css("opacity",0.0)
					.animate({
						opacity: 1.0
					},1500,function(){
						$("#content").append("2.jpg");
					});
				} else {
					ele.attr("src","1.jpg")
					.css("opacity",0.0)
					.animate({
						opacity: 1.0
					},1500);
				}
			}
			setInterval(change,3000);
			
		});
	</script> 
</head>
<body>
	<div id="content"></div>
	<div id="imgElement">
		<img src="1.jpg" alt="测试" height="400" />
	</div>
</body>
</html>

